<!-- 其他包装弹窗 -->
<template>
    <Modal :value="value" width="746" class-name="otherPacking-modal" ref="packingModalRef" :closable="false" :mask-closable="false">
        <div slot="header">
            其他包装
            <Icon class="f-fr" type="ios-close" @click="closeModel"/>
        </div>
        <div class="content-body">
            <table class="packag-table" cellpadding="0" cellspacing="0" width="100%">
                <thead>
                    <tr>
                        <th width="20%">
                            <Checkbox
                                v-model="checkAll"
                                :disabled="editORshow"
                                @on-change="checkAllHandle(checkAll)"
                            ></Checkbox>
                        </th>
                        <th width="40%">
                            包装材料种类代码
                        </th>
                        <th width="40%">
                            包装材料种类名称
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr v-for="(item, index) in otherPackingList" :key="index">
                        <td>
                            <Checkbox
                                v-model="item.isSelected"
                                :disabled="editORshow"
                                @on-change="packagItemChange()"
                            ></Checkbox>
                        </td>
                        <td>{{ item.dataCode }}</td>
                        <td>{{ item.shortName }}</td>
                    </tr>
                </tbody>
            </table>
        </div>
        <div slot="footer">
            <Button style="display: none" type="default" @click="closeModel">取消</Button>
            <Button type="primary" @click="savePackingData">保存</Button>
        </div>
    </Modal>
</template>

<script>
export default {
    name: 'PackingModal',
    props: {
        value: {
            default: false,
            type: Boolean
        },
        packingModal: {
            default: function () {
                return {
                    tempArr: [],
                    editORshow: false
                }
            },
            type: Object
        }
    },

    data () {
        return {
            checkAll: false,
            editORshow: false,
            otherPackingList: []
        }
    },

    created () {
        this.init(this.packingModal.editORshow, this.packingModal.tempArr)
    },

    methods: {
        // 组建初始化
        init (editORshow, selectionGetPacking) {
            // 获取vuex 上存储的其他包装的数据字典类型
            this.otherPackingList = JSON.parse(localStorage.getItem('PACKAGE_TYPE'))

            this.otherPackingList.forEach(item => {
                this.$set(item, 'isSelected', false)
            })
            // 根据传进来的参数，判断当前是 新增/修改（false） 还是 查看（true）
            this.editORshow = editORshow
            // 根据传进来的参数，也就是后端存储的参数，循环判断哪些可以选中，那些不需要选中
            if (selectionGetPacking.length > 0) {
                // 传进来的是，存储的参数
                for (let i = 0; i < selectionGetPacking.length; i++) {
                    // 这里是数据字典存储的参数
                    for (let j = 0; j < this.otherPackingList.length; j++) {
                        // 判断是否有相等的
                        if (selectionGetPacking[i] === this.otherPackingList[j].dataCode) {
                            // 相等就被勾选
                            this.$set(this.otherPackingList[j], 'isSelected', true)
                        }
                    }
                }
                // 判断全选是否需要选中
                this.calculateSelectItem()
            }
        },

        // 用户点击保存，开始循环处理数据。
        savePackingData () {
            let tempArr = []
            this.otherPackingList.forEach(item => {
                if (item.isSelected) {
                    tempArr.push(item.dataCode)
                }
            })
            let res = tempArr.join()
            this.$emit('setOtherWrapData', res)
            this.closeModel()
        },

        // 全选方法，勾选以后，所有的列表数据都需要勾选
        checkAllHandle (state) {
            this.otherPackingList.forEach(item => {
                this.$set(item, 'isSelected', state)
            })
        },
        // 下面表体里面的单个勾选，如果勾选的是最后一个，全部都勾选了，那么全选按钮需要被勾选
        packagItemChange () {
            this.calculateSelectItem()
        },
        // 判断全选是否需要选中，用selects 计数，计数长度与数据字典长度做比较，如果相等，表示全选
        calculateSelectItem () {
            let selects = 0
            this.otherPackingList.forEach(item => {
                if (item.isSelected) {
                    selects++
                }
            })
            if (selects === this.otherPackingList.length) {
                this.checkAll = true
            } else {
                this.checkAll = false
            }
        },
        // 关闭其他包装的弹出框
        closeModel () {
            this.$emit('input', false)
        }
    }
}
</script>

<style lang="less">
    .otherPacking-modal {
        .packag-table {
            border: 1px solid #e8eaec;
            border-bottom: 0;

            th, td {
                padding: 10px 0;
                border-bottom: 1px solid #e8eaec;
            }

            thead {
                text-align: left;
                background-color: #f8f8f9;
                border-bottom: 1px solid #e8eaec;
                cursor: pointer;

                & > tr > th:first-child {
                    text-align: center;
                }
            }

            tbody {
                tr {
                    cursor: pointer;

                    &:hover, &:active {
                        background-color: #f8f8f9;
                    }
                }

                tr > td:first-child {
                    text-align: center;
                }
            }
        }
    }

    @media screen and (max-width: 1400px) {
        .otherPacking-modal {
            .ivu-modal-body {
                height: 300px !important;
            }
        }
    }
</style>
